<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目申报管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        .container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .btn-group {
            margin-bottom: 15px;
        }
        .btn {
            padding: 6px 12px;
            margin-right: 10px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #fff;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
        }
        .btn svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            fill: #666;
        }
        .search-box {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
            border-radius: 8px;
            overflow: visible;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            border: 1px solid #e8e8e8;
        }
        .search-group-container {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            align-items: flex-end;
            margin-right: 20px;
        }
        .search-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            outline: none;
            font-size: 14px;
            border-radius: 4px;
            transition: all 0.3s;
            height: 40px;
            box-sizing: border-box;
        }
        .search-input:focus {
            border-color: #2d8cf0;
            box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
        }
        .search-btn {
            padding: 0 20px;
            background-color: #2d8cf0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(45, 140, 240, 0.3);
            height: 40px;
            min-width: 100px;
            margin-left: 20px;
            font-size: 14px;
            align-self: flex-end;
            margin-bottom: 0;
        }
        .search-btn:hover {
            background-color: #2b85e4;
            box-shadow: 0 2px 8px rgba(45, 140, 240, 0.5);
        }
        .search-btn svg {
            width: 16px;
            height: 16px;
            fill: white;
            margin-right: 5px;
        }
        .search-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
            font-weight: 500;
        }
        .search-group {
            flex: 1;
            margin-right: 20px;
            position: relative;
            margin-bottom: 15px;
            min-width: 200px;
        }
        .search-group:last-child {
            margin-right: 0;
        }
        
        .search-filters {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        
        .filter-item {
            display: inline-flex;
            align-items: center;
            background-color: #e6f7ff;
            color: #2d8cf0;
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 10px;
            margin-bottom: 5px;
            cursor: pointer;
        }
        
        .filter-item .filter-close {
            margin-left: 5px;
            color: #2d8cf0;
            font-weight: bold;
        }
        .dropdown {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .dropdown-content {
            display: block;
            position: absolute;
            background-color: #fff;
            min-width: 100%;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
            z-index: 10;
            border-radius: 4px;
            margin-top: 5px;
            border: 1px solid #eee;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        .dropdown-content a {
            color: #333;
            padding: 10px 16px;
            text-decoration: none;
            display: block;
            font-size: 14px;
            transition: all 0.3s;
        }
        .dropdown-content a:hover {
            background-color: #f6f6f6;
            color: #2d8cf0;
        }
        .dropdown-content a.selected {
            background-color: #e6f7ff;
            color: #2d8cf0;
        }
        .dropdown.active .dropdown-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .dropdown-btn {
            background-color: white;
            color: #666;
            padding: 10px 12px;
            font-size: 14px;
            border: 1px solid #ddd;
            cursor: pointer;
            text-align: left;
            width: 100%;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
            height: 40px;
            box-sizing: border-box;
        }
        .dropdown-btn:hover {
            border-color: #2d8cf0;
        }
        .dropdown-btn:focus {
            outline: none;
            border-color: #2d8cf0;
            box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
        }
        .dropdown-btn::after {
            content: '';
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #666;
            margin-left: 10px;
            transition: transform 0.3s;
        }
        .dropdown.active .dropdown-btn::after {
            transform: rotate(180deg);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #eee;
            border-radius: 4px;
            overflow: hidden;
        }
        th, td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        th {
            background-color: #f9f9f9;
            font-weight: bold;
            color: #333;
            white-space: nowrap;
        }
        td {
            color: #444;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .status-approved {
            color: #fff;
            background-color: #19be6b;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-not-approved {
            color: #fff;
            background-color: #ff9900;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .action-link {
            color: #2d8cf0;
            text-decoration: none;
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            align-items: center;
        }
        .pagination span {
            margin: 0 5px;
            font-size: 14px;
            color: #666;
        }
        .page-btn {
            padding: 5px 10px;
            margin: 0 2px;
            border: 1px solid #ddd;
            background-color: #fff;
            cursor: pointer;
            border-radius: 3px;
            font-size: 12px;
        }
        .page-btn.active {
            background-color: #2d8cf0;
            color: #fff;
            border-color: #2d8cf0;
        }
        .empty {
            color: #999;
        }
        .red-text {
            color: #ed4014;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: #fff;
            border-radius: 5px;
            width: 80%;
            max-width: 1000px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .modal-close {
            cursor: pointer;
            font-size: 20px;
            color: #999;
        }
        
        .modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .modal-footer {
            padding: 12px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
        }
        
        .attachment-preview {
            flex: 1;
            min-height: 400px;
            border: 1px solid #eee;
            margin-bottom: 15px;
            overflow: auto;
        }
        
        .attachment-iframe {
            width: 100%;
            height: 500px;
            border: none;
        }
        
        .attachment-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .attachment-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .attachment-item:hover, .attachment-item.active {
            border-color: #2d8cf0;
            background-color: #f0f9ff;
        }
        
        .attachment-item svg {
            width: 18px;
            height: 18px;
            margin-right: 5px;
            fill: #ed4014;
        }
        
        .attachment-action-btns {
            display: flex;
            gap: 10px;
        }
        
        .attachment-btn {
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .attachment-btn svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
        
        .btn-blue {
            background-color: #2d8cf0;
            color: #fff;
            border: none;
        }
        
        .btn-default {
            background-color: #fff;
            color: #666;
            border: 1px solid #ddd;
        }
        
        .btn-danger {
            background-color: #ed4014;
            color: #fff;
            border: none;
        }
        
        .expert-btn {
            padding: 4px 8px;
            background-color: #2d8cf0;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            margin-left: 10px;
        }
        
        .expert-btn.disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .print-btn {
            margin-left: 10px;
        }
        
        /* 专家弹窗样式 */
        .expert-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .expert-modal-content {
            background-color: #fff;
            border-radius: 5px;
            width: 500px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .expert-form {
            padding: 20px;
        }
        
        .expert-form-group {
            margin-bottom: 15px;
        }
        
        .expert-form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .expert-form-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .expert-form-select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .expert-list {
            margin-top: 20px;
            border: 1px solid #eee;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .expert-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .expert-item:last-child {
            border-bottom: none;
        }
        
        .expert-info {
            flex: 1;
        }
        
        .expert-name {
            font-weight: bold;
        }
        
        .expert-role {
            font-size: 12px;
            color: #999;
        }
        
        .expert-remove {
            color: #ed4014;
            cursor: pointer;
            font-size: 12px;
        }
        .remark-cell {
            max-width: 200px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            cursor: pointer;
        }
        .remark-cell:hover {
            white-space: normal;
            overflow: visible;
            z-index: 1;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            padding: 8px;
            min-width: 200px;
        }
        .remark-cell .edit-icon {
            display: none;
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            color: #2d8cf0;
            font-size: 14px;
        }
        .remark-cell:hover .edit-icon {
            display: inline-block;
        }
        
        /* 备注编辑弹窗 */
        .remark-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .remark-modal-content {
            background-color: #fff;
            border-radius: 5px;
            width: 500px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .remark-modal-body {
            padding: 20px;
        }
        
        .remark-textarea {
            width: 100%;
            min-height: 120px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            font-family: inherit;
            font-size: 14px;
        }
        
        .remark-textarea:focus {
            outline: none;
            border-color: #2d8cf0;
            box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
        }
    </style>
</head>
<body>
    <!-- SVG图标库 -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="icon-add" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/>
        </symbol>
        <symbol id="icon-edit" viewBox="0 0 24 24">
            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
        </symbol>
        <symbol id="icon-delete" viewBox="0 0 24 24">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
        </symbol>
        <symbol id="icon-return" viewBox="0 0 24 24">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </symbol>
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </symbol>
        <symbol id="icon-download" viewBox="0 0 24 24">
            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
        </symbol>
        <symbol id="icon-print" viewBox="0 0 24 24">
            <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
        </symbol>
        <symbol id="icon-trash" viewBox="0 0 24 24">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
        </symbol>
        <symbol id="icon-pdf" viewBox="0 0 24 24">
            <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"/>
        </symbol>
        <symbol id="icon-close" viewBox="0 0 24 24">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
        </symbol>
    </svg>

    <div class="container">
        <div class="btn-group">
            <button class="btn" id="addBtn">
                <svg><use href="#icon-add"></use></svg>
                新增
            </button>
            <button class="btn" id="withdrawBtn">
                <svg><use href="#icon-return"></use></svg>
                撤回
            </button>
            <button class="btn" id="reviewBtn">
                <svg><use href="#icon-edit"></use></svg>
                审核
            </button>
        </div>

        <div class="search-box">
            <div class="search-group-container">
                <div class="search-group">
                    <label class="search-label">项目名称</label>
                    <input type="text" class="search-input" id="projectNameInput" placeholder="请输入项目名称">
                </div>
                <div class="search-group">
                    <label class="search-label">状态</label>
                    <div class="dropdown" id="statusDropdownContainer">
                        <button type="button" class="dropdown-btn" id="statusDropdown" data-value="">请选择状态</button>
                        <div class="dropdown-content" id="statusDropdownContent">
                            <a href="javascript:void(0);" data-value="all">全部</a>
                            <a href="javascript:void(0);" data-value="approved">通过</a>
                            <a href="javascript:void(0);" data-value="rejected">未通过</a>
                            <a href="javascript:void(0);" data-value="pending">待审核</a>
                        </div>
                    </div>
                </div>
                <div class="search-group">
                    <label class="search-label">创建人</label>
                    <input type="text" class="search-input" id="creatorInput" placeholder="请输入创建人">
                </div>
            </div>
            <button class="search-btn" id="searchBtn">
                <svg><use href="#icon-search"></use></svg>
                搜索
            </button>
        </div>

        <div class="search-filters" id="searchFilters" style="display: none;">
            <!-- 筛选标签将在这里动态添加 -->
        </div>

        <table>
            <thead>
                <tr>
                    <th style="width: 40px;"><input type="checkbox" class="checkbox" id="selectAll"></th>
                    <th style="width: 40px;">NO</th>
                    <th>项目名称</th>
                    <th>项目编号</th>
                    <th>申请人</th>
                    <th>申请日期</th>
                    <th>状态</th>
                    <th>验收类型</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>1</td>
                    <td>信息化智能终端升级项目</td>
                    <td>XXXX-XXXX-XXXX</td>
                    <td>张三</td>
                    <td>2022-09-15</td>
                    <td><span class="status-approved">通过</span></td>
                    <td>验收</td>
                    <td class="remark-cell" data-id="1">
                        按时完成项目验收
                        <span class="edit-icon"><i class="fa fa-pencil"></i>编辑</span>
                    </td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="1">查看</a>
                        <button class="expert-btn" data-id="1">添加验收专家</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>2</td>
                    <td>网络安全防护系统建设</td>
                    <td>XXXX-XXXX-XXXX</td>
                    <td>李四</td>
                    <td>2024-06-24</td>
                    <td><span class="status-not-approved">未通过</span></td>
                    <td>验收</td>
                    <td class="remark-cell" data-id="2">
                        项目存在安全隐患，需要进一步改进系统的防火墙设置和漏洞修复
                        <span class="edit-icon"><i class="fa fa-pencil"></i>编辑</span>
                    </td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="2">查看</a>
                        <button class="expert-btn disabled" data-id="2" disabled>添加验收专家</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>3</td>
                    <td>数字化运营平台</td>
                    <td>XXXX-XXXX-XXXX</td>
                    <td>王五</td>
                    <td>2023-12-01</td>
                    <td><span class="status-approved">通过</span></td>
                    <td>验收</td>
                    <td class="remark-cell" data-id="3">
                        功能完善，验收通过，可以正式上线使用
                        <span class="edit-icon"><i class="fa fa-pencil"></i>编辑</span>
                    </td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="3">查看</a>
                        <button class="expert-btn" data-id="3">添加验收专家</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span>共 600 条</span>
            <button class="page-btn">&lt;</button>
            <button class="page-btn">50</button>
            <button class="page-btn active">51</button>
            <button class="page-btn">52</button>
            <button class="page-btn">53</button>
            <button class="page-btn">54</button>
            <button class="page-btn">...</button>
            <button class="page-btn">&gt;</button>
        </div>
    </div>

    <!-- 附件预览弹窗 -->
    <div class="modal" id="attachmentModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">项目附件</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="attachment-list" id="attachmentList">
                    <!-- 附件列表 -->
                </div>
                <div class="attachment-preview">
                    <iframe class="attachment-iframe" id="previewFrame" src=""></iframe>
                </div>
                <div class="attachment-action-btns">
                    <button class="attachment-btn btn-blue" id="downloadBtn">
                        <svg><use href="#icon-download"></use></svg>
                        下载
                    </button>
                    <button class="attachment-btn btn-default" id="printBtn">
                        <svg><use href="#icon-print"></use></svg>
                        打印
                    </button>
                    <button class="attachment-btn btn-danger" id="deleteBtn">
                        <svg><use href="#icon-trash"></use></svg>
                        删除
                    </button>
                    <button class="attachment-btn btn-blue print-btn" id="printFormBtn">
                        <svg><use href="#icon-print"></use></svg>
                        打印验收表
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" id="closeModal">关闭</button>
            </div>
        </div>
    </div>

    <!-- 添加验收专家弹窗 -->
    <div class="expert-modal" id="expertModal">
        <div class="expert-modal-content">
            <div class="modal-header">
                <h3 class="modal-title">添加验收专家</h3>
                <span class="modal-close" id="closeExpertBtn">&times;</span>
            </div>
            <div class="modal-body">
                <div class="expert-form">
                    <div class="expert-form-group">
                        <label class="expert-form-label">专家姓名</label>
                        <input type="text" class="expert-form-input" id="expertName" placeholder="请输入专家姓名">
                    </div>
                    <div class="expert-form-group">
                        <label class="expert-form-label">专家单位</label>
                        <input type="text" class="expert-form-input" id="expertUnit" placeholder="请输入专家所在单位">
                    </div>
                    <div class="expert-form-group">
                        <label class="expert-form-label">专家职称</label>
                        <select class="expert-form-select" id="expertTitle">
                            <option value="">请选择职称</option>
                            <option value="教授">教授</option>
                            <option value="副教授">副教授</option>
                            <option value="高级工程师">高级工程师</option>
                            <option value="工程师">工程师</option>
                            <option value="研究员">研究员</option>
                            <option value="副研究员">副研究员</option>
                        </select>
                    </div>
                    <div class="expert-form-group">
                        <label class="expert-form-label">联系电话</label>
                        <input type="text" class="expert-form-input" id="expertPhone" placeholder="请输入联系电话">
                    </div>
                    <div class="expert-form-group">
                        <label class="expert-form-label">专家角色</label>
                        <select class="expert-form-select" id="expertRole">
                            <option value="">请选择角色</option>
                            <option value="组长">组长</option>
                            <option value="成员">成员</option>
                        </select>
                    </div>
                    <button class="save-btn" id="addExpertBtn">添加</button>
                    
                    <div class="expert-list" id="expertList">
                        <!-- 专家列表 -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="save-btn" id="saveExpertBtn">保存</button>
                <button class="btn" id="cancelExpertBtn">取消</button>
            </div>
        </div>
    </div>

    <!-- 备注编辑弹窗 -->
    <div class="remark-modal" id="remarkModal">
        <div class="remark-modal-content">
            <div class="modal-header">
                <h3 class="modal-title">编辑备注</h3>
                <span class="modal-close" id="closeRemarkBtn">&times;</span>
            </div>
            <div class="remark-modal-body">
                <textarea class="remark-textarea" id="remarkTextarea" placeholder="请输入备注内容"></textarea>
            </div>
            <div class="modal-footer">
                <button class="save-btn" id="saveRemarkBtn">保存</button>
                <button class="btn" id="cancelRemarkBtn">取消</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取新增按钮和所有复选框
            const addBtn = document.getElementById('addBtn');
            const searchBtn = document.getElementById('searchBtn');
            const withdrawBtn = document.getElementById('withdrawBtn');
            const reviewBtn = document.getElementById('reviewBtn');
            
            // 为新增按钮添加点击事件
            addBtn.addEventListener('click', function() {
                // 跳转到创建验收申请页面
                window.location.href = 'pigeonhole/acceptance-pigeonhole.html';
            });
            
            // 为撤回按钮添加点击事件
            withdrawBtn.addEventListener('click', function() {
                // 检查是否有选中的项目
                const selectedItems = document.querySelectorAll('tbody input[type="checkbox"]:checked');
                if (selectedItems.length === 0) {
                    alert('请先选择要撤回的项目！');
                    return;
                }
                
                if (confirm('确定要撤回选中的项目吗？')) {
                    // 这里可以添加撤回逻辑，例如发送AJAX请求到服务器
                    alert('撤回成功！');
                }
            });
            
            // 为审核按钮添加点击事件
            reviewBtn.addEventListener('click', function() {
                // 检查是否有选中的项目
                const selectedItems = document.querySelectorAll('tbody input[type="checkbox"]:checked');
                if (selectedItems.length === 0) {
                    alert('请先选择要审核的项目！');
                    return;
                }
                
                if (selectedItems.length > 1) {
                    alert('一次只能审核一个项目！');
                    return;
                }
                
                // 跳转到审核页面
                const selectedRow = selectedItems[0].closest('tr');
                const projectId = selectedRow.querySelector('.view-btn').getAttribute('data-id');
                
                // 这里可以根据实际需求设置跳转路径
                window.location.href = `review.html?id=${projectId}`;
            });
            
            // 状态下拉菜单
            const statusDropdown = document.getElementById('statusDropdown');
            const statusDropdownContainer = document.getElementById('statusDropdownContainer');
            const statusOptions = document.querySelectorAll('#statusDropdownContent a');
            
            // 点击下拉按钮时切换下拉菜单的显示状态
            statusDropdown.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // 切换active类
                statusDropdownContainer.classList.toggle('active');
            });
            
            // 点击选项时更新按钮文本并设置选中状态
            statusOptions.forEach(function(option) {
                option.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const value = this.getAttribute('data-value');
                    const text = this.textContent;
                    
                    console.log('选择状态:', { value, text });
                    
                    // 更新按钮文本和数据属性
                    statusDropdown.textContent = text;
                    statusDropdown.setAttribute('data-value', value);
                    
                    // 移除所有选项的选中状态
                    statusOptions.forEach(opt => opt.classList.remove('selected'));
                    
                    // 设置当前选项的选中状态
                    this.classList.add('selected');
                    
                    // 关闭下拉菜单
                    statusDropdownContainer.classList.remove('active');
                });
            });
            
            // 点击页面其他地方时关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!statusDropdownContainer.contains(e.target)) {
                    statusDropdownContainer.classList.remove('active');
                }
            });
            
            // 全选/取消全选
            const selectAllCheckbox = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('tbody .checkbox');
            
            selectAllCheckbox.addEventListener('change', function() {
                checkboxes.forEach(function(checkbox) {
                    checkbox.checked = selectAllCheckbox.checked;
                });
            });
            
            // 当单个复选框状态变化时，更新全选复选框
            checkboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    const allChecked = Array.from(checkboxes).every(function(checkbox) {
                        return checkbox.checked;
                    });
                    
                    selectAllCheckbox.checked = allChecked;
                });
            });
            
            // 附件预览功能
            const modal = document.getElementById('attachmentModal');
            const closeBtn = document.querySelector('.modal-close');
            const closeModalBtn = document.getElementById('closeModal');
            const viewBtns = document.querySelectorAll('.view-btn');
            const attachmentList = document.getElementById('attachmentList');
            const previewFrame = document.getElementById('previewFrame');
            const downloadBtn = document.getElementById('downloadBtn');
            const printBtn = document.getElementById('printBtn');
            const deleteBtn = document.getElementById('deleteBtn');
            const printFormBtn = document.getElementById('printFormBtn');
            
            // 模拟数据 - 项目附件列表
            const projectAttachments = {
                1: [
                    { id: 1, name: '验收申请表.pdf', type: 'pdf', url: '/assets/files/验收申请表.pdf' },
                    { id: 2, name: '验收报告.pdf', type: 'pdf', url: '/assets/files/验收报告.pdf' },
                    { id: 3, name: '项目总结.pdf', type: 'pdf', url: '/assets/files/项目总结.pdf' }
                ],
                2: [
                    { id: 4, name: '网络安全验收申请.pdf', type: 'pdf', url: '/assets/files/网络安全验收申请.pdf' },
                    { id: 5, name: '项目验收清单.pdf', type: 'pdf', url: '/assets/files/项目验收清单.pdf' }
                ],
                3: [
                    { id: 6, name: '数字化平台验收申请.pdf', type: 'pdf', url: '/assets/files/数字化平台验收申请.pdf' },
                    { id: 7, name: '验收测试报告.pdf', type: 'pdf', url: '/assets/files/验收测试报告.pdf' }
                ]
            };
            
            // 打开模态框
            viewBtns.forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const projectId = btn.getAttribute('data-id');
                    openAttachmentModal(projectId);
                });
            });
            
            // 关闭模态框
            closeBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });
            
            closeModalBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });
            
            // 打开附件模态框并加载附件
            function openAttachmentModal(projectId) {
                // 清空附件列表
                attachmentList.innerHTML = '';
                
                // 加载该项目的附件
                const attachments = projectAttachments[projectId] || [];
                
                if (attachments.length === 0) {
                    attachmentList.innerHTML = '<div>该项目暂无附件</div>';
                    previewFrame.src = '';
                } else {
                    // 创建附件列表
                    attachments.forEach(function(attachment) {
                        const attachmentItem = document.createElement('div');
                        attachmentItem.className = 'attachment-item';
                        attachmentItem.setAttribute('data-url', attachment.url);
                        attachmentItem.setAttribute('data-id', attachment.id);
                        attachmentItem.setAttribute('data-project-id', projectId);
                        
                        attachmentItem.innerHTML = `
                            <svg><use href="#icon-pdf"></use></svg>
                            ${attachment.name}
                        `;
                        
                        // 点击附件预览
                        attachmentItem.addEventListener('click', function() {
                            // 移除其他附件的active状态
                            document.querySelectorAll('.attachment-item').forEach(function(item) {
                                item.classList.remove('active');
                            });
                            
                            // 添加当前附件的active状态
                            attachmentItem.classList.add('active');
                            
                            // 设置预览iframe的src
                            previewFrame.src = attachment.url;
                        });
                        
                        attachmentList.appendChild(attachmentItem);
                    });
                    
                    // 默认预览第一个附件
                    if (attachments.length > 0) {
                        const firstAttachment = attachmentList.querySelector('.attachment-item');
                        firstAttachment.classList.add('active');
                        previewFrame.src = attachments[0].url;
                    }
                }
                
                // 显示模态框
                modal.style.display = 'flex';
            }
            
            // 下载附件
            downloadBtn.addEventListener('click', function() {
                const activeAttachment = document.querySelector('.attachment-item.active');
                if (activeAttachment) {
                    const url = activeAttachment.getAttribute('data-url');
                    window.open(url, '_blank');
                }
            });
            
            // 打印附件
            printBtn.addEventListener('click', function() {
                previewFrame.contentWindow.print();
            });
            
            // 删除附件
            deleteBtn.addEventListener('click', function() {
                const activeAttachment = document.querySelector('.attachment-item.active');
                if (activeAttachment) {
                    if (confirm('确定要删除此附件吗？')) {
                        const attachmentId = activeAttachment.getAttribute('data-id');
                        // 这里应该发送AJAX请求到服务器删除附件
                        // 模拟删除成功后的UI更新
                        activeAttachment.remove();
                        
                        // 如果还有其他附件，则预览第一个
                        const firstAttachment = document.querySelector('.attachment-item');
                        if (firstAttachment) {
                            firstAttachment.classList.add('active');
                            previewFrame.src = firstAttachment.getAttribute('data-url');
                        } else {
                            previewFrame.src = '';
                            attachmentList.innerHTML = '<div>该项目暂无附件</div>';
                        }
                    }
                }
            });
            
            // 打印验收表
            printFormBtn.addEventListener('click', function() {
                const activeAttachment = document.querySelector('.attachment-item.active');
                if (activeAttachment) {
                    const projectId = activeAttachment.getAttribute('data-project-id');
                    
                    // 创建打印选项对话框
                    const printOptions = document.createElement('div');
                    printOptions.style.position = 'fixed';
                    printOptions.style.top = '50%';
                    printOptions.style.left = '50%';
                    printOptions.style.transform = 'translate(-50%, -50%)';
                    printOptions.style.backgroundColor = '#fff';
                    printOptions.style.padding = '20px';
                    printOptions.style.borderRadius = '5px';
                    printOptions.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
                    printOptions.style.zIndex = '2000';
                    
                    printOptions.innerHTML = `
                        <h3 style="margin-bottom: 15px;">选择打印方式</h3>
                        <div style="margin-bottom: 15px;">
                            <button id="printPaper" style="padding: 8px 15px; background-color: #2d8cf0; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">打印纸质版</button>
                            <button id="printElectronic" style="padding: 8px 15px; background-color: #2d8cf0; color: #fff; border: none; border-radius: 4px; cursor: pointer;">导出电子版</button>
                        </div>
                        <button id="cancelPrint" style="padding: 5px 10px; background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">取消</button>
                    `;
                    
                    document.body.appendChild(printOptions);
                    
                    // 纸质版打印
                    document.getElementById('printPaper').addEventListener('click', function() {
                        window.print();
                        document.body.removeChild(printOptions);
                    });
                    
                    // 电子版导出
                    document.getElementById('printElectronic').addEventListener('click', function() {
                        // 这里可以调用生成PDF的方法
                        alert('已生成PDF版本，开始下载...');
                        // 模拟下载
                        setTimeout(function() {
                            const a = document.createElement('a');
                            a.href = '/assets/files/项目验收申请表.pdf';
                            a.download = '项目验收申请表.pdf';
                            a.click();
                            document.body.removeChild(printOptions);
                        }, 1000);
                    });
                    
                    // 取消打印
                    document.getElementById('cancelPrint').addEventListener('click', function() {
                        document.body.removeChild(printOptions);
                    });
                }
            });
            
            // 添加验收专家功能
            const expertBtns = document.querySelectorAll('.expert-btn:not(.disabled)');
            const expertModal = document.getElementById('expertModal');
            const closeExpertBtn = document.getElementById('closeExpertBtn');
            const cancelExpertBtn = document.getElementById('cancelExpertBtn');
            const saveExpertBtn = document.getElementById('saveExpertBtn');
            const addExpertBtn = document.getElementById('addExpertBtn');
            const expertList = document.getElementById('expertList');
            
            // 当前项目ID
            let currentProjectId = null;
            
            // 专家列表数据
            const projectExperts = {
                1: [],
                3: []
            };
            
            // 打开专家弹窗
            expertBtns.forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    currentProjectId = btn.getAttribute('data-id');
                    openExpertModal(currentProjectId);
                });
            });
            
            // 关闭专家弹窗
            closeExpertBtn.addEventListener('click', function() {
                expertModal.style.display = 'none';
            });
            
            cancelExpertBtn.addEventListener('click', function() {
                expertModal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === expertModal) {
                    expertModal.style.display = 'none';
                }
            });
            
            // 添加专家
            addExpertBtn.addEventListener('click', function() {
                const name = document.getElementById('expertName').value.trim();
                const unit = document.getElementById('expertUnit').value.trim();
                const title = document.getElementById('expertTitle').value;
                const phone = document.getElementById('expertPhone').value.trim();
                const role = document.getElementById('expertRole').value;
                
                if (!name) {
                    alert('请输入专家姓名！');
                    return;
                }
                
                if (!unit) {
                    alert('请输入专家单位！');
                    return;
                }
                
                if (!title) {
                    alert('请选择专家职称！');
                    return;
                }
                
                if (!phone) {
                    alert('请输入联系电话！');
                    return;
                }
                
                if (!role) {
                    alert('请选择专家角色！');
                    return;
                }
                
                // 检查是否已有组长
                if (role === '组长') {
                    const hasLeader = projectExperts[currentProjectId].some(function(expert) {
                        return expert.role === '组长';
                    });
                    
                    if (hasLeader) {
                        alert('已存在组长，一个项目只能有一个组长！');
                        return;
                    }
                }
                
                // 添加专家
                const expert = {
                    id: Date.now(),
                    name: name,
                    unit: unit,
                    title: title,
                    phone: phone,
                    role: role
                };
                
                projectExperts[currentProjectId].push(expert);
                
                // 更新专家列表
                renderExpertList();
                
                // 清空表单
                document.getElementById('expertName').value = '';
                document.getElementById('expertUnit').value = '';
                document.getElementById('expertTitle').value = '';
                document.getElementById('expertPhone').value = '';
                document.getElementById('expertRole').value = '';
            });
            
            // 渲染专家列表
            function renderExpertList() {
                expertList.innerHTML = '';
                
                const experts = projectExperts[currentProjectId] || [];
                
                if (experts.length === 0) {
                    expertList.innerHTML = '<div style="padding: 10px; text-align: center; color: #999;">暂无专家</div>';
                    return;
                }
                
                experts.forEach(function(expert) {
                    const expertItem = document.createElement('div');
                    expertItem.className = 'expert-item';
                    
                    expertItem.innerHTML = `
                        <div class="expert-info">
                            <div class="expert-name">${expert.name}（${expert.title}）</div>
                            <div class="expert-role">${expert.role} | ${expert.unit} | ${expert.phone}</div>
                        </div>
                        <span class="expert-remove" data-id="${expert.id}">删除</span>
                    `;
                    
                    expertList.appendChild(expertItem);
                });
                
                // 为删除按钮添加事件
                document.querySelectorAll('.expert-remove').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        const expertId = parseInt(this.getAttribute('data-id'));
                        
                        projectExperts[currentProjectId] = projectExperts[currentProjectId].filter(function(expert) {
                            return expert.id !== expertId;
                        });
                        
                        renderExpertList();
                    });
                });
            }
            
            // 保存专家列表
            saveExpertBtn.addEventListener('click', function() {
                const experts = projectExperts[currentProjectId] || [];
                
                if (experts.length === 0) {
                    alert('请至少添加一名专家！');
                    return;
                }
                
                // 检查是否有组长
                const hasLeader = experts.some(function(expert) {
                    return expert.role === '组长';
                });
                
                if (!hasLeader) {
                    alert('请至少添加一名组长！');
                    return;
                }
                
                // 这里可以添加保存逻辑，例如发送AJAX请求到服务器
                alert('保存成功！专家已添加到项目中，专家可在评审端看到该项目。');
                expertModal.style.display = 'none';
            });
            
            // 打开专家弹窗
            function openExpertModal(projectId) {
                currentProjectId = projectId;
                
                // 初始化专家列表数据
                if (!projectExperts[projectId]) {
                    projectExperts[projectId] = [];
                }
                
                // 渲染专家列表
                renderExpertList();
                
                // 显示模态框
                expertModal.style.display = 'flex';
            }

            // 为搜索按钮添加点击事件
            searchBtn.addEventListener('click', function() {
                const projectNameInput = document.getElementById('projectNameInput').value;
                const statusInput = document.getElementById('statusDropdown').getAttribute('data-value') || '';
                const creatorInput = document.getElementById('creatorInput').value;
                
                // 显示筛选条件
                showFilters(projectNameInput, statusInput, creatorInput);
                
                // 这里可以添加搜索逻辑，例如发送AJAX请求到服务器
                console.log('搜索条件：', {
                    projectName: projectNameInput,
                    status: statusInput,
                    creator: creatorInput
                });
                
                // 模拟搜索结果
                alert('搜索成功！');
            });
            
            // 显示筛选标签
            function showFilters(projectName, status, creator) {
                const filtersContainer = document.getElementById('searchFilters');
                filtersContainer.innerHTML = '';
                
                let hasFilter = false;
                
                if (projectName) {
                    addFilterItem(filtersContainer, '项目名称: ' + projectName, function() {
                        document.getElementById('projectNameInput').value = '';
                        showFilters('', status, creator);
                    });
                    hasFilter = true;
                }
                
                if (status && status !== 'all') {
                    let statusText = '全部';
                    if (status === 'approved') statusText = '通过';
                    if (status === 'rejected') statusText = '未通过';
                    if (status === 'pending') statusText = '待审核';
                    
                    addFilterItem(filtersContainer, '状态: ' + statusText, function() {
                        document.getElementById('statusDropdown').textContent = '请选择状态';
                        document.getElementById('statusDropdown').setAttribute('data-value', '');
                        document.querySelectorAll('.dropdown-content a').forEach(opt => opt.classList.remove('selected'));
                        showFilters(projectName, '', creator);
                    });
                    hasFilter = true;
                }
                
                if (creator) {
                    addFilterItem(filtersContainer, '创建人: ' + creator, function() {
                        document.getElementById('creatorInput').value = '';
                        showFilters(projectName, status, '');
                    });
                    hasFilter = true;
                }
                
                if (hasFilter) {
                    addFilterItem(filtersContainer, '清除所有', function() {
                        document.getElementById('projectNameInput').value = '';
                        document.getElementById('statusDropdown').textContent = '请选择状态';
                        document.getElementById('statusDropdown').setAttribute('data-value', '');
                        document.querySelectorAll('.dropdown-content a').forEach(opt => opt.classList.remove('selected'));
                        document.getElementById('creatorInput').value = '';
                        showFilters('', '', '');
                    });
                    
                    filtersContainer.style.display = 'flex';
                } else {
                    filtersContainer.style.display = 'none';
                }
            }
            
            // 添加筛选标签
            function addFilterItem(container, text, closeCallback) {
                const filterItem = document.createElement('div');
                filterItem.className = 'filter-item';
                filterItem.innerHTML = text + '<span class="filter-close">×</span>';
                
                filterItem.querySelector('.filter-close').addEventListener('click', function(e) {
                    e.stopPropagation();
                    closeCallback();
                });
                
                container.appendChild(filterItem);
            }

            // 备注编辑功能
            const remarkCells = document.querySelectorAll('.remark-cell');
            const remarkModal = document.getElementById('remarkModal');
            const closeRemarkBtn = document.getElementById('closeRemarkBtn');
            const cancelRemarkBtn = document.getElementById('cancelRemarkBtn');
            const saveRemarkBtn = document.getElementById('saveRemarkBtn');
            const remarkTextarea = document.getElementById('remarkTextarea');
            
            // 当前编辑的备注单元格
            let currentRemarkCell = null;
            
            // 打开备注编辑弹窗
            remarkCells.forEach(function(cell) {
                cell.addEventListener('click', function(e) {
                    if (e.target.classList.contains('edit-icon') || e.target.parentElement.classList.contains('edit-icon')) {
                        e.stopPropagation();
                        
                        // 获取当前备注内容
                        const remarkContent = this.childNodes[0].nodeValue.trim();
                        currentRemarkCell = this;
                        
                        // 设置文本框内容
                        remarkTextarea.value = remarkContent;
                        
                        // 显示弹窗
                        remarkModal.style.display = 'flex';
                        remarkTextarea.focus();
                    }
                });
            });
            
            // 关闭备注编辑弹窗
            closeRemarkBtn.addEventListener('click', function() {
                remarkModal.style.display = 'none';
            });
            
            cancelRemarkBtn.addEventListener('click', function() {
                remarkModal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === remarkModal) {
                    remarkModal.style.display = 'none';
                }
            });
            
            // 保存备注
            saveRemarkBtn.addEventListener('click', function() {
                const newRemark = remarkTextarea.value.trim();
                
                if (!newRemark) {
                    alert('备注内容不能为空！');
                    return;
                }
                
                if (currentRemarkCell) {
                    // 更新备注内容
                    currentRemarkCell.childNodes[0].nodeValue = newRemark + ' ';
                    
                    // 这里可以添加保存逻辑，例如发送AJAX请求到服务器
                    const projectId = currentRemarkCell.getAttribute('data-id');
                    console.log('保存备注：', {
                        projectId: projectId,
                        remark: newRemark
                    });
                    
                    // 关闭弹窗
                    remarkModal.style.display = 'none';
                    
                    // 提示保存成功
                    alert('备注保存成功！');
                }
            });
        });
    </script>
</body>
</html>
